<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/js.css">

</head>

<body>
  <p class="bg-primary ">欢迎，来到注册中心</p>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <style>
    .col-2 {
      padding-top: 7px;
    }

    .form-check {
      padding-left: 7rem;
    }

    .form-group {
      margin-left: 5rem;
    }

    .align-middle {
      margin-left: 16rem;
      margin-bottom: 2rem;
    }

    .btn {
      margin-left: 10rem;
    }

    .comment {
      display: none;
    }
  </style>
  </head>

  <body>
    <div class="container">
      <div class="row align-items-center">
        <div class="col"></div>
        <div class="col">
          <div class="alert alert-danger text-center invisible" role="alert" style="width: 42rem;">
            <strong>提示：</strong>
            <font id="msgId"></font>
          </div>
        </div>
        <div class="col"></div>
      </div>

      <div class="row align-items-center" style="height: 30rem;">
        <div class="col">

        </div>
        <div class="col">
          <div class="card shadow rounded" style="width: 42rem;">
            <div class="card-body align-items-center">
              <h2 class="align-middle">注册</h2>
              <form id="registerForm" action="/registerDone" method="POST">

                <div class="form-group row">
                  <label class="col-2" for="exampleInputEmail1">用户名：</label>
                  <input type="text" class="form-control col-6" name="username" id="username"
                    aria-describedby="emailHelp">
                  <small id="comment" class="form-text text-muted">{{msg}}</small>
                </div>
                <div class="form-group row">
                  <label class="col-2" for="exampleInputPassword1">密码：</label>
                  <input type="password" class="form-control col-6" name="password" id="password">
                </div>
                <div class="form-group row">
                  <label class="col-2" for="exampleInputPassword1">确认密码：</label>
                  <input type="password" class="form-control col-6" name="confirmpassword" id="confirmpassword">
                </div>


                <button type="button" class="btn btn-primary" onclick="OUT()">取消</button>
                <button type="button" class="btn btn-primary" onclick="jump()">注册</button>
              </form>
            </div>
          </div>
        </div>
        <div class="col">

        </div>
      </div>

    </div>

  </body>

  <script src="/static/js/jquery-3.6.0.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script>

    // 点击注册时 执行的方法（获取数据，进行初步验证，验证通过则通过ajax向后台提交数据；否则提示验证不通过的信息）
    function jump() {
      // 获取表单数据
      let uid = $('#username').val();
      let pwd = $('#password').val();
      let confirmpwd = $('#confirmpassword').val();

      // 判断用户名、密码是否为空，为空则提示；不为空则向服务器提交
      if (uid.length > 0 && pwd.length > 0 && pwd === confirmpwd) {
        axios({
          method: 'post',
          url: '/registerDone',
          data: $('#registerForm').serialize(),
        }).then(function (res) {
          // axios工具下，服务器真正返回的数据在返回对象的data中
          res = res.data;
          if (res.code === 200) {
            window.location.href = '/';
          } else {
            alert_fn(res.msg);
            console.log(res.msg);
          }
        }).catch((err) => {
          alert_fn(err);
         
        });
      } else {
        alert_fn('用户名、密码不能为空，并且两次密码应该一致');
      }
    }
    function OUT() {
      window.location.href = "/"
    };

    // 这个方法包装了alert的相关行为和显示的内容
    function alert_fn(msg) {
      msg = msg || '密码不能为空，两次密码应该一致';
      // 替换提示的内容w
      $('#msgId').text(msg);
      // 移除不显示的class，则alert将显示
      $('.alert').removeClass('invisible');
      // 三秒中后，给alert增加不显示的class，则alert重新隐藏
      setTimeout(() => {
        $('.alert').addClass('invisible');
      }, 3000);
    }</script>

</html>